let welcomeEl = document.createElement('div');
welcomeEl.id = 'welcome';
welcomeEl.innerHTML = `
  <div class="welcome-loading">
    <div class="pyramid-loader">
      <div class="wrapper">
        <span class="side side1"></span>
        <span class="side side2"></span>
        <span class="side side3"></span>
        <span class="side side4"></span>
        <span class="shadow"></span>
      </div>
    </div>
    <div class="text" id="progressText">配置初始化</div>
  </div>`;
document.body.appendChild(welcomeEl);

let css = document.createElement('link');
css.rel = 'stylesheet';
css.href = './static/css/loading.css';
document.head.appendChild(css);

let percent = 0;
let progressTextEl = document.getElementById('progressText');
let timer = setInterval(() => {
  if (percent >= 98) {
    clearInterval(timer);
    return;
  } else {
    percent += 1;
    if (percent >= 0 && percent < 15) {
      progressTextEl.innerText = '配置初始化';
    } else if (percent >= 15 && percent < 30) {
      progressTextEl.innerText = '内核初始化';
    } else if (percent >= 25 && percent < 70) {
      progressTextEl.innerText = '图片资源加载中';
    } else if (percent >= 70 && percent < 90) {
      progressTextEl.innerText = '字体资源加载中';
    } else if (percent >= 90 && percent < 99) {
      progressTextEl.innerText = '其他静态资源加载中';
    }
  }
}, 100);

window.onload = function () {
  clearInterval(timer);
  progressTextEl.innerText = '加载完毕';
  let appEl = document.getElementById('app');
  welcomeEl.style.opacity = 0;
  setTimeout(() => {
    welcomeEl.style.display = 'none';
    appEl.style.opacity = 1;
  }, 300);
};
